<template>
  <a-modal v-bind:visible="isShowView" width="60%" title="操作" @ok="handleOk" @cancel="onCancel">
    <div>
      <a-tabs default-active-key="1" @change="onChange">
        <a-tab-pane key="1" tab="上级">
          <a-spin :spinning="loadingone">
            <a-table
              style="height: 400px; overflow-y: auto"
              bordered
              :columns="columnsone"
              :data-source="tableDataone"
              :pagination="false"
            >
            </a-table>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane key="2" tab="下级">
          <a-spin :spinning="loadingtwo">
            <a-table
              style="height: 400px; overflow-y: auto"
              bordered
              :columns="columnstwo"
              :data-source="tableDatatwo"
              :pagination="false"
            >
            </a-table>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-modal>
</template>
<script>
import { topListAPI, bottomListAPI } from '@/api/userinfo.js'
export default {
  name: 'ViewGrade',
  props: {
    isShowView: {
      type: Boolean,
      default: false
    },
    viewId: {
      type: Number,
      default: null
    }
  },
  watch: {
    async isShowView(Boolean) {
      if (Boolean) {
        try {
          this.loadingone = true
          const { data } = await topListAPI({ id: this.viewId })
          this.tableDataone = data
        } finally {
          this.loadingone = false
        }
        try {
          this.loadingtwo = true
          this.sendForm.user_id = this.viewId
          const { data } = await bottomListAPI(this.sendForm)
          this.tableDatatwo = data.list
        } finally {
          this.loadingtwo = false
        }
      }
    }
  },
  data() {
    return {
      sendForm: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        user_id: '',
        page: 1,
        page_size: 100
      },
      loadingone: false,
      loadingtwo: false,
      columnsone: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '注册时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '用户姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '用户手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '等级',
          dataIndex: 'level_name',
          align: 'center'
        },
        {
          title: '直推数',
          dataIndex: 'direct_count',
          align: 'center'
        },
        {
          title: '团队数',
          dataIndex: 'team_count',
          align: 'center'
        },
        {
          title: '自用交易量',
          dataIndex: 'total_trade',
          align: 'center'
        },
        {
          title: '团队交易量',
          dataIndex: 'total_team_trade',
          align: 'center'
        },
        {
          title: '账户余额',
          dataIndex: 'money',
          align: 'center'
        }
      ],
      tableDataone: [],
      columnstwo: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '注册时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '用户姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '用户手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '等级',
          dataIndex: 'level_name',
          align: 'center'
        },
        {
          title: '直推数',
          dataIndex: 'direct_count',
          align: 'center'
        },
        {
          title: '团队数',
          dataIndex: 'team_count',
          align: 'center'
        },
        {
          title: '自用交易量',
          dataIndex: 'total_trade',
          align: 'center'
        },
        {
          title: '团队交易量',
          dataIndex: 'total_team_trade',
          align: 'center'
        },
        {
          title: '账户余额',
          dataIndex: 'money',
          align: 'center'
        }
      ],
      tableDatatwo: []
    }
  },
  methods: {
    async onChange(val) {
      if (val == 1) {
        try {
          this.loadingone = true
          const { data } = await topListAPI({ id: this.viewId })
          this.tableDataone = data
        } finally {
          this.loadingone = false
        }
      } else if (val == 2) {
        try {
          this.loadingtwo = true
          this.sendForm.user_id = this.viewId
          const { data } = await bottomListAPI(this.sendForm)
          this.tableDatatwo = data.list
        } finally {
          this.loadingtwo = false
        }
      }
    },
    handleOk() {
      this.$emit('update:isShowView', false)
    },
    onCancel() {
      this.$emit('update:isShowView', false)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-wrapper::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-wrapper::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
</style>
